<template>
  <div class="info">
    <div class="header">
      <p class="con">
        <span>给我们留言</span>
        <span @click="back">
          <Icon name="arrow-down" />
        </span>
      </p>
    </div>
    <p class="p">您好，很抱歉我们暂时无法为您提供服务，如需帮助，请留言，我们将尽快联系并解决您的问题</p>
    <p class="my">手机</p>
    <CellGroup>
      <Field placeholder="请输入" />
    </CellGroup>
    <p class="my">
      留言内容
      <font style="color:red">*</font>
    </p>
    <CellGroup>
      <Field placeholder="请输入" />
    </CellGroup>       
  </div>
</template>

<script>
import { Icon, Field, CellGroup } from "vant";
export default {
  components: {
    Icon,
    Field,
    CellGroup,
  },
  methods:{
    back(){
      this.$router.go(-1)
    }
  }
};
</script>

<style scoped>
.header {
  width: 100%;
  height: 80px;
  background-color: #1d78e7;
  overflow: hidden;
}
.con {
  width: 90%;
  margin: 30px auto;
  color: #ffffff;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
}
.p {
  padding: 10px 15px;
}
.my{
    margin-left: 20px;
}
</style>